// src/views/data/ECharts.tsx
import React, { FC, useEffect, useState } from 'react';
import * as echarts from 'echarts';
import { Row, Col, Button } from 'antd'
import { getData } from '../../api/data';
interface IEChartsProps {
  
};

const ECharts:FC<IEChartsProps> = () => {
  // const [data, setData] = useState([255, 20, 36, 10, 10, 20,20, 36, 10, 10, 20, 60])

  // const changeData = () => {
  //   const arr = [512, 20, 36, 10, 10, 20,20, 36, 10, 10, 20, 60]
  //   const newArr:number[] = []
  //   arr.forEach(item => {
  //     newArr.push(item + Math.floor(100 + Math.random()* 100))
  //   })
  //   setData(newArr)
  // }

  useEffect(() => {
    var myBarChart = echarts.init(document.getElementById('barECharts') as HTMLDivElement);
    const option = {
      tooltip: {},
      xAxis: {
        data: ['1月', '2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
      },
      yAxis: {},
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
      },
      series: [
        {
          name: '外卖',
          type: 'bar',
          data: [320, 336, 310, 310, 420, 460,500, 620, 636, 510, 410, 380]
          // data
        },
        {
          name: '门店',
          type: 'bar',
          // data
          data: [220, 236, 210, 210, 220, 260,225, 220, 236, 210, 210, 220]
        }
      ]
    }
    myBarChart.setOption(option)
  }, [])
  useEffect(() => {
    var myLineChart = echarts.init(document.getElementById('lineCharts') as HTMLDivElement);
    const option = {
      tooltip: {},
      xAxis: {
        data: ['珍珠', '芋泥', '青稞', '多肉', '燕麦', '巧克力']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'line',
          smooth: true,
          areaStyle: {},
          data: [5005, 3230, 2136, 4610, 2010, 2020]
          // data
        }
      ]
    }
    myLineChart.setOption(option)
  }, [])

  useEffect(() => {
    var myPieChart = echarts.init(document.getElementById('pieECharts') as HTMLDivElement);
    const option = {
      legend: {
        top: 'bottom'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [50, 100],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 100, name: '水蜜桃' },
            { value: 280, name: '草莓' },
            { value: 320, name: '芒果' },
            { value: 400, name: '柠檬' },
            { value: 480, name: '葡萄' },
            { value: 360, name: '金桔' },
            { value: 220, name: '西柚' },
            { value: 180, name: '西瓜' }
          ]
        }
      ]
    }
    myPieChart.setOption(option)
  }, [])

  const [dbData, setDbData] = useState([])
  useEffect(() => {
    var mydbECharts = echarts.init(document.getElementById('dbECharts') as HTMLDivElement);
    getData().then(res => {
      setDbData(res.data.data)
    })
    const xAxisArr: string[] = []
    const dataArr: number[] = []
    dbData.forEach((item: { x: string, val: number }) => {
      xAxisArr.push(item.x)
      dataArr.push(item.val)
    })
    const option = {
      xAxis: {
        data: ['1月', '2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
      },
      yAxis: {},
      series: [
        {
          data: [2000, 3500, 2800, 3249,3566,4577,6688,7799,6655,5533,5022,3000],
          type: 'line',
          stack: 'x'
        },
        {
          data: [3000, 5022, 6655, 7799, 6688,4577, 3566, 3249, 2800, 3500,2000,4000],
          type: 'line',
          stack: 'x'
        }
      ]
    }
    mydbECharts.setOption(option)
    window.addEventListener('resize',() => { 
      mydbECharts && mydbECharts.resize();
    })
  }, [dbData])
  return (
    <>
      {/* <h1>echarts <Button onClick={ changeData }>切换数据</Button></h1> */}
      <Row gutter={30}>
        <Col span={12}>
          <h2>销售渠道</h2>
          <div id="barECharts" style={{ width: '100%', height: 300, backgroundColor: '#efefef'}}></div>
        </Col>
        <Col span={12}>
          <h2>小料</h2>
          <div id="lineCharts" style={{ width: '100%', height: 300, backgroundColor: '#efefef'}}></div>
        </Col>
      </Row>
      <Row gutter={30}>
        <Col span={12}>
          <h2>水果</h2>
          <div id="pieECharts" style={{ width: '100%', height: 300, backgroundColor: '#efefef'}}></div>
        </Col>
        <Col span={12}>
          <h2>果茶类与奶茶类</h2>
          <div id="dbECharts" style={{ width: '100%', height: 300, backgroundColor: '#efefef'}}></div>
        </Col>
      </Row>
    </>
  )
};

export default ECharts;